<template>
  <el-container>
    <el-header><h1>在线转换excel</h1></el-header>
    <el-main>
      <el-upload
        class="upload-demo"
        action=""
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :before-upload="beforeUpload"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls</div>
      </el-upload>
      <el-button size="small" type="primary" id="export-table" @click="exportFunc">下载XLS</el-button>
    <div id="out-table">
      <el-table
      :data="tableData"
      :loading="loading"
      style="width: 100%">
      <el-table-column
        prop="教工号"
        label="教工号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="姓名"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="部门"
        label="部门"
        width="100">
      </el-table-column>
      
      <el-table-column
        prop="早读"
        label="早读">
        <el-table-column prop="早读.正常" label="正常"></el-table-column>
        <el-table-column prop="早读.迟到" label="迟到"></el-table-column>
        <el-table-column prop="早读.迟到详情" :show-overflow-tooltip="true" label="迟到详情"></el-table-column>
        <el-table-column prop="早读.未打卡" label="未打卡"></el-table-column>
        <el-table-column prop="早读.未打卡详情" :show-overflow-tooltip="true"   label="未打卡详情"></el-table-column>

      </el-table-column>
      <el-table-column
        prop="正课"
        label="正课">
        <el-table-column prop="正课.正常" label="正常"></el-table-column>
        <el-table-column prop="正课.迟到" label="迟到"></el-table-column>
        <el-table-column prop="正课.迟到详情" :show-overflow-tooltip="true" label="迟到详情"></el-table-column>
        <el-table-column prop="正课.未打卡" label="未打卡"></el-table-column>
        <el-table-column prop="正课.未打卡详情" :show-overflow-tooltip="true" label="未打卡详情"></el-table-column>

      </el-table-column>
      <el-table-column
        prop="晚自习"
        label="晚自习">
        <el-table-column prop="晚自习.正常" label="正常"></el-table-column>
        <el-table-column prop="晚自习.迟到" label="迟到"></el-table-column>
        <el-table-column prop="晚自习.迟到详情" :show-overflow-tooltip="true" label="迟到详情"></el-table-column>
        <el-table-column prop="晚自习.未打卡" label="未打卡"></el-table-column>
        <el-table-column prop="晚自习.未打卡详情" :show-overflow-tooltip="true" label="未打卡详情"></el-table-column>

      </el-table-column>
    </el-table>
  </div>

    </el-main>
  </el-container>
      
  
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver';


export default {
  name: 'Excel',
  components: {
  },
  data () {
    return {
      fileList: [],
      tableData: [],
      loading: true
    }
  },
  methods: {
    handleRemove(file, fileList) {
        // console.log(file, fileList);
    },
    handlePreview(file) {
        // console.log(file);
    },
    handleExceed(files, fileList) {
      // console.log(files);
        // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeUpload(file){
      let loading = this.$loading({
          lock: true,
          text: 'Loading'
      });
      var fileReader = new FileReader();
      let that = this
      fileReader.onload = function(ev) {
        try {
            var data = ev.target.result,
                workbook = XLSX.read(data, {
                    type: 'binary'
                }), // 以二进制流方式读取得到整份excel表格对象
                persons = []; // 存储获取到的数据
        } catch (e) {
          loading.close()
          this.$message.warning(`文件类型不正确`);
          return;
        }
        // 表格的表格范围，可用于判断表头是否数量是否正确
        var fromTo = '';
        // 遍历每张表读取
        for (var sheet in workbook.Sheets) {
            if (workbook.Sheets.hasOwnProperty(sheet)) {
                fromTo = workbook.Sheets[sheet]['!ref'];
                
                persons =     persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                                // break; // 如果只取第一张表，就取消注释这行
            }
        }
        loading.close()
        that.dealData(persons);
      };
      fileReader.readAsBinaryString(file);

      return false
    },
    dealData(list){
      this.tableData = []
      let Obj = {};
      let temp, jie;
      let zd_zc_num = 0, zd_cd_num  = 0, zd_wdk_num = 0
      let zk_zc_num = 0, zk_cd_num = 0, zk_wdk_num = 0;
      let wzx_zc_num = 0, wzx_cd_num = 0, wzx_wdk_num = 0;
      let zd_cd_xq = '', zd_wdk_xq = '';
      let zk_cd_xq = '', zk_wdk_xq = '';
      let wzx_cd_xq = '', wzx_wdk_xq = '';

      for(let i in list) {
        temp = list[i]
        zd_zc_num = zd_cd_num = zd_wdk_num = 0;
        zk_zc_num = zk_cd_num = zk_wdk_num = 0;
        wzx_zc_num = wzx_cd_num = wzx_wdk_num = 0;
        zd_cd_xq = zd_wdk_xq = '';
        zk_cd_xq = zk_wdk_xq = '';
        wzx_cd_xq = wzx_wdk_xq = '';
        if(temp['考勤名称'].indexOf('早读')>= 0) {
          if(temp['打卡状态'] == '迟到') {
            zd_cd_num = 1
            zd_cd_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
          }else if(temp['打卡状态'] == '未打卡'){

            zd_wdk_num = 1
            zd_wdk_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
          }else{
            zd_zc_num = 1
          }
        }else if(temp['考勤名称'].indexOf('节')>= 0) {
          jie = parseInt(temp['考勤名称'].replace(/[^0-9]/ig,""))
          if(jie > 0 && jie <= 9) {//1-9
            if(temp['打卡状态'] == '迟到') {
              zk_cd_num = 1
              zk_cd_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
            }else if(temp['打卡状态'] == '未打卡'){
              zk_wdk_num = 1
              zk_wdk_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
            }else{
              zk_zc_num = 1
            }
          }else{//10-14
            if(temp['打卡状态'] == '迟到') {
              wzx_cd_num = 1
              wzx_cd_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
            }else if(temp['打卡状态'] == '未打卡'){
              wzx_wdk_num = 1
              wzx_wdk_xq = temp['考勤日期'] + temp['考勤名称'] + temp['打卡时间'] + '\n'
            }else{
              wzx_zc_num = 1
            }
          }

        }
        if(!Obj.hasOwnProperty(temp['教工号'])) {
          Obj[temp['教工号']] = {
            '教工号': temp['教工号'],
            '姓名': temp['姓名'],
            '部门': temp['部门'],
            '早读': {
              '正常': zd_zc_num,
              '迟到': zd_cd_num,
              '迟到详情': zd_cd_xq,
              '未打卡': zd_wdk_num,
              '未打卡详情': zd_wdk_xq,
            },
            '正课': {
              '正常': zk_zc_num,
              '迟到': zk_cd_num,
              '迟到详情': zk_cd_xq,
              '未打卡': zk_wdk_num,
              '未打卡详情': zk_wdk_xq,
            },
            '晚自习': {
              '正常': wzx_zc_num,
              '迟到': wzx_cd_num,
              '迟到详情': wzx_cd_xq,
              '未打卡': wzx_wdk_num,
              '未打卡详情': wzx_wdk_xq,
            },
          }
        }else{
          Obj[temp['教工号']]['早读']['正常'] += zd_zc_num
          Obj[temp['教工号']]['早读']['迟到'] += zd_cd_num
          Obj[temp['教工号']]['早读']['迟到详情'] += zd_cd_xq
          Obj[temp['教工号']]['早读']['未打卡'] += zd_wdk_num
          Obj[temp['教工号']]['早读']['未打卡详情'] += zd_wdk_xq

          Obj[temp['教工号']]['正课']['正常'] += zk_zc_num
          Obj[temp['教工号']]['正课']['迟到'] += zk_cd_num
          Obj[temp['教工号']]['正课']['迟到详情'] += zk_cd_xq
          Obj[temp['教工号']]['正课']['未打卡'] += zk_wdk_num
          Obj[temp['教工号']]['正课']['未打卡详情'] += zk_wdk_xq

          Obj[temp['教工号']]['晚自习']['正常'] += wzx_zc_num
          Obj[temp['教工号']]['晚自习']['迟到'] += wzx_cd_num
          Obj[temp['教工号']]['晚自习']['迟到详情'] += wzx_cd_xq
          Obj[temp['教工号']]['晚自习']['未打卡'] += wzx_wdk_num
          Obj[temp['教工号']]['晚自习']['未打卡详情'] += wzx_wdk_xq
        }

        // if(temp['教工号'] == 'te2019053')console.log(Obj[temp['教工号']])
        
        // Obj[list[i]['教工号']] = {
        //   '教工号': list[i]['教工号'],
        //   '姓名': list[i]['姓名'],
        //   '部门': list[i]['部门'],
        //   '早读正常': list[i]['部门'],
        //   '早读迟到': list[i]['部门'],
        //   '早读迟到详情': list[i]['部门'],
        //   '早读未打卡': list[i]['部门'],
        //   '早读未打卡详情': list[i]['部门'],
        // }
      }
      let tableData = []
      for(let i in Obj){
        this.tableData.push(Obj[i])
      }
      // console.log(Obj)
    },
    exportFunc: function(e) {
      // 从表生成工作簿对象
      var wb = XLSX.utils.table_to_book(document.getElementById('out-table'));
      // 得到二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        type: 'binary'
      });
      
      FileSaver.saveAs(new Blob([this.s2ab(wbout)], {
        type: 'application/octet-stream'
      }), this.getFileName() + '.xlsx');
    },
    s2ab: function(s) {
      var cuf;
      var i;
      if (typeof ArrayBuffer !== 'undefined') {
        cuf = new ArrayBuffer(s.length);
        var view = new Uint8Array(cuf);
        for (i = 0; i !== s.length; i++) {
          view[i] = s.charCodeAt(i) & 0xFF;
        }
        return cuf;
      } else {
        cuf = new Array(s.length);
        for (i = 0; i !== s.length; ++i) {
          cuf[i] = s.charCodeAt(i) & oxFF;
        }
        return cuf;
      }
    },
    getFileName(){
      var nowDate = new Date();

      var year = nowDate.getFullYear();
      var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
  : nowDate.getMonth() + 1;
      var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
  .getDate();
      return year + "-" + month + "-" + day;
    }
  }
};
</script>

<style lang="less">
#export-table{ float:right;}
</style>
